<template>
	<view class="addbox">
		<u-navbar :title="$t('幸运币充值')">
			<view class="righttit" slot="right" @click="$.to('/pagesA/pages/my/withdrawal_log')">
				{{$t('充值明细')}}
			</view>
		</u-navbar>
		<view class="top">
			<view>
				<view class="tit">
					{{$t('可用余额')}}
				</view>
				<view class="num">
					{{userInfo.balance}}
				</view>
			</view>
		</view>
		<!-- <view class="row">
			<u-field v-model="form_data.bank_fullname" :border-bottom="false" :label="$t('收款人')" :placeholder="$t('请填写收款姓名')">
			</u-field>
		</view>
		<view class="row">
			<u-field v-model="form_data.bank_card" :border-bottom="false" :label="$t('收款卡')"
				:placeholder="$t('请填写收款账户')">
			</u-field>
		</view> -->
		<view class="row" @click="bank_type_show = true">
			<u-field v-model="form_data.bank_type" disabled right-icon="arrow-right" :border-bottom="false" :label="$t('支付方式')"
				:placeholder="$t('请选择支付方式')">
			</u-field>
		</view>
		<view class="row">
			<u-field v-model="form_data.number" type="number" :border-bottom="false" :label="$t('充值数额')"
				:placeholder="$t('请填写充值金额')">
			</u-field>
		</view>
		<button class="btn" @click="post">{{$t('确认充值')}}</button>
<!--		<u-select v-model="bank_type_show" mode="single-column" :list="sys_bank_list" @confirm="confirm"></u-select>-->
    <u-action-sheet :list="sys_bank_list" @click="confirm" v-model="bank_type_show" :cancel-btn="true"
                    :cancel-text="$t('取消')"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form_data: {
					bank_fullname:'',
					bank_card:'',
					bank_type:'',
					number:'',
					my_bank_id:0,
					sys_bank_id:0,
				},
				bank_type_show:false,
				userInfo:{},
				sys_bank_list:[],
			}
		},
		onLoad() {
			if (uni.getStorageSync("user")) {
				// this.get_sys_bank();
				// this.get_my_bank();
				this.getUser()
			}
			this.$http({
				url: "/api/common/getchargelist",
				data: {},
			}).then((res) => {
				console.log('充值金额列表',res.data.data);
			});
			this.$http({
				url: "/api/common/getpaylist",
				data: {},
			}).then((res) => {
				this.sys_bank_list = []
				res.data.data.paytype.forEach((item, idx) => {
					this.sys_bank_list.push({
						text: item,
						value: idx + 1,
					})
				})
				console.log('支付方式',this.sys_bank_list);
			});
		},
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url:'/pages/my/login'
				})
			}
		},
		methods: {
			//充值
			post(){
				// console.log("this.form_data: " + JSON.stringify(this.form_data));
				// if(this.form_data.bank_fullname==''){
				// 	this.$tip.tip(this.$t('请输入您的收款姓名'));
				// 	return;
				// }
				// if(this.form_data.bank_card==''){
				// 	this.$tip.tip(this.$t('请输入您的收款账户'));
				// 	return;
				// }
				// if(this.form_data.bank_type==''){
				// 	this.$tip.tip(this.$t('请选择收款类型'));
				// 	return;
				// }
				// if(this.form_data.number<=0){
				// 	this.$tip.tip(this.$t('请输入提现金额'));
				// 	return;
				// }
				uni.showLoading({
					title: this.$t('充值中，请稍后'),
					mask: true
				});
				
				this.$http({
					url: "api/pay/charge",
					data:this.form_data,
				}).then(res => {
					uni.hideLoading();
					this.$tip.tip(res.data.msg)
					if (res.data.code == 1) {
						//this.getUser()
						this.fun.go_h5pay(res.data.data);	
					}
				}).catch(err => {});
			},
			get_sys_bank(){
				this.$http({
					url: "/api/common/get_sys_bank",
				}).then(res => {
					if (res.data.code == 1) {
						var data = res.data.data;
						data.forEach((item, idx) => {
							item.value = item.id;
							item.label = item.title;
						})
						this.sys_bank_list = data;
					}
				}).catch(err => {});
			},
			get_my_bank(){
				this.$http({
					url: "/api/member/get_my_bank",
				}).then(res => {
					if (res.data.code == 1) {
						this.form_data.bank_fullname = res.data.data.bank_fullname;
						this.form_data.bank_card = res.data.data.bank_card;
						this.form_data.bank_type = res.data.data.bank_type;
						this.form_data.sys_bank_id = res.data.data.bank_id;
						this.form_data.my_bank_id = res.data.data.id;
					}
				}).catch(err => {});
			},
			getUser() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.userInfo = res.data.data
						uni.setStorageSync('user', res.data.data)
					}
				}).catch(err => {});
			},
			confirm(val) {
        this.bank_type_show = false;
				this.form_data.bank_type = this.sys_bank_list[val].text;
				this.form_data.sys_bank_id = this.sys_bank_list[val].value;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4F4FC;
	}
	
	.addbox {
		position: relative;
		min-height: 100vh;
	}
	
	.row {
		width: 710rpx;
		padding: 10rpx 0;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}
	
	.btn {
		width: 710rpx;
		position: absolute;
		left: 20rpx;
		bottom: 40rpx;
		background-color: #2AC2B3;
		color: #fff;
	}
	.righttit{
		margin-right: 20rpx;
	}
	.top {
		background: url(https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/qh.png);
		background-size: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		height: 200rpx;
		justify-content: center;
		color: #fff;
	}
	
	.num {
		font-weight: bold;
		font-size: 46rpx;
		margin-top: 20rpx;
	}
</style>
